<template>
  <el-drawer :title="title" :visible.sync="open" @close="onClose" size="40%" :wrapperClosable="false"
    :close-on-press-escape="false" append-to-body>
    <el-form v-loading="loading" ref="form" :model="form" :disabled="disabled" label-width="auto" class="form">
      <template v-if="merchant.bankAccountType === 'SSQY-MC'">
        <el-form-item label="是否线上场景" prop="isOnlineScene">
          <el-checkbox v-model="form.bankExtra.isOnlineScene" true-value="1" false-value="0" true-label="1"
            false-lable="0" />
        </el-form-item>
        <el-form-item label="企业网址" prop="onlineEnterpriseWebsite"
          :rules="[{ type: 'string', max: 256, message: '不能超过256个字符' }]">
          <el-input v-model="form.bankExtra.onlineEnterpriseWebsite" />
        </el-form-item>
        <el-form-item label="网店名称" prop="onlineShopName" :rules="[{ type: 'string', max: 128, message: '不能超过128个字符' }]">
          <el-input v-model="form.bankExtra.onlineShopName" />
        </el-form-item>
        <el-form-item label="是否加盟连锁" prop="isFranchiseChain">
          <el-checkbox v-model="form.bankExtra.isFranchiseChain" true-value="1" false-value="0" true-label="1"
            false-lable="0" />
        </el-form-item>
        <template v-if="form.bankExtra.isOnlineScene !== '1'">
          <el-form-item label="门头照" prop="bankAddtional.doorPhoto"
            :rules="[{ required: true, message: '请上传门头照', trigger: 'change' }]">
            <IncomingFileUpload v-model="form.bankAddtional.doorPhoto" api="/common/upload" :limit="1" :fileSize="5" />
          </el-form-item>
          <el-form-item label="收银台照" prop="bankAddtional.cashierPhoto"
            :rules="[{ required: true, message: '请上传收银台照', trigger: 'change' }]">
            <IncomingFileUpload v-model="form.bankAddtional.cashierPhoto" api="/common/upload" :limit="1"
              :fileSize="5" />
          </el-form-item>
          <el-form-item label="经营场地照片" prop="bankAddtional.businessPremisesPhoto"
            :rules="[{ required: true, message: '请上传经营场地照片', trigger: 'change' }]">
            <IncomingFileUpload v-model="form.bankAddtional.businessPremisesPhoto" api="/common/upload" :limit="1"
              :fileSize="5" />
          </el-form-item>
          <el-form-item label="近30天内某1日的订单流水截图" prop="bankAddtional.latest3MonthOrderTradeFlow"
            :rules="[{ required: true, message: '请上传近30天内某1日的订单流水截图', trigger: 'change' }]">
            <IncomingFileUpload v-model="form.bankAddtional.latest3MonthOrderTradeFlow" api="/common/upload" :limit="1"
              :fileSize="5" />
          </el-form-item>
          <el-form-item label="收单协议/合作协议" prop="bankAddtional.acquiringAgreement"
            :rules="[{ required: true, message: '请上传收单协议/合作协议', trigger: 'change' }]">
            <IncomingFileUpload v-model="form.bankAddtional.acquiringAgreement" api="/common/upload" :limit="1"
              :fileSize="5" />
          </el-form-item>
        </template>
        <template v-if="form.bankExtra.isOnlineScene === '1'">
          <el-form-item label="流量平台店铺的截图" prop="bankAddtional.doorPhoto"
            :rules="[{ required: true, message: '请上传流量平台店铺的截图', trigger: 'change' }]">
            <IncomingFileUpload v-model="form.bankAddtional.doorPhoto" api="/common/upload" :limit="1" :fileSize="5" />
          </el-form-item>
          <el-form-item label="店铺分享的链接/二维码" prop="bankAddtional.cashierPhoto"
            :rules="[{ required: true, message: '请上传店铺分享的链接/二维码', trigger: 'change' }]">
            <IncomingFileUpload v-model="form.bankAddtional.cashierPhoto" api="/common/upload" :limit="1"
              :fileSize="5" />
          </el-form-item>
          <el-form-item label="流量平台店铺资质截图" prop="bankAddtional.businessPremisesPhoto"
            :rules="[{ required: true, message: '请上传流量平台店铺资质截图', trigger: 'change' }]">
            <IncomingFileUpload v-model="form.bankAddtional.businessPremisesPhoto" api="/common/upload" :limit="1"
              :fileSize="5" />
          </el-form-item>
          <el-form-item label="近30天内某1日的订单流水截图" prop="bankAddtional.latest3MonthOrderTradeFlow"
            :rules="[{ required: true, message: '请上传近30天内某1日的订单流水截图', trigger: 'change' }]">
            <IncomingFileUpload v-model="form.bankAddtional.latest3MonthOrderTradeFlow" api="/common/upload" :limit="1"
              :fileSize="5" />
          </el-form-item>
          <el-form-item label="库存照/下游供货合作协议" prop="bankAddtional.inventoryPhoto">
            <IncomingFileUpload v-model="form.bankAddtional.inventoryPhoto" api="/common/upload" :limit="1"
              :fileSize="5" />
          </el-form-item>
        </template>
      </template>
      <template v-if="merchant.bankAccountType === 'HT-MC'">
        <el-form-item label="注册省份" prop="bankExtra.registerProvince"
          :rules="[{ required: true, message: '必须选择注册省份', trigger: 'change' }]">
          <el-select v-model="form.bankExtra.registerProvince" @change="registerProvinceChange">
            <el-option v-for="o in baofuHtProvince" :key="o.value" :label="o.label" :value="o.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="注册城市" prop="bankExtra.registerCity"
          :rules="[{ required: true, message: '必须选择注册城市', trigger: 'change' }]">
          <el-select v-model="form.bankExtra.registerCity" @change="registerCityChange">
            <el-option v-for="o in baofuHtCity" :key="o.value" :label="o.label" :value="o.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="注册区县" prop="bankExtra.registerDistinct"
          :rules="[{ required: true, message: '必须选择注册区县', trigger: 'change' }]">
          <el-select v-model="form.bankExtra.registerDistinct">
            <el-option v-for="o in baofuHtDistinct" :key="o.value" :label="o.label" :value="o.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="行业" prop="bankExtra.occupation"
          :rules="[{ required: true, message: '必须选择行业', trigger: 'change' }]">
          <el-select v-model="form.bankExtra.occupation">
            <el-option v-for="o in baofuHtOccupation" :key="o.value" :label="o.label" :value="o.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="企业类型" prop="bankExtra.enterpriseType"
          :rules="[{ required: true, message: '必须选择企业类型', trigger: 'change' }]">
          <el-select v-model="form.bankExtra.enterpriseType">
            <el-option v-for="o in baofuHtEnterpriseType" :key="o.value" :label="o.label" :value="o.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="企业规模" prop="bankExtra.enterpriseScale"
          :rules="[{ required: true, message: '必须选择企业规模', trigger: 'change' }]">
          <el-select v-model="form.bankExtra.enterpriseScale">
            <el-option v-for="o in baofuHtEnterpriseScale" :key="o.value" :label="o.label" :value="o.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="经济性质" prop="bankExtra.economicNature"
          :rules="[{ required: true, message: '必须选择经济性质', trigger: 'change' }]">
          <el-select v-model="form.bankExtra.economicNature">
            <el-option v-for="o in baofuHtEconomicNature" :key="o.value" :label="o.label" :value="o.value" />
          </el-select>
        </el-form-item>
      </template>
    </el-form>
    <div class="footer-operation">
      <el-button @click=" open = false">返回</el-button>
      <template v-if="!this.disabled">
        <el-button :loading="loading" type="success" @click="save" v-clickOnce>保存草稿</el-button>
        <el-button :loading="loading" type="primary" @click="submit" v-clickOnce>提交</el-button>
      </template>
    </div>
  </el-drawer>
</template>
<script>
import IncomingFileUpload from '@/components/IncomingFileUpload/index.vue'
import { findBaofuMerchant, editBaofuMerchant, bankAccountBaofuMerchant } from '@/api/ecs/baofu'
import { baofuHtCityCode, baofuHtOccupation, baofuHtEnterpriseType, baofuHtEnterpriseScale, baofuHtEconomicNature } from '@/api/ecs/baofu'

export default {
  name: 'BaofuBankEditor',
  components: { IncomingFileUpload },
  data() {
    return {
      baofuHtProvince: baofuHtCityCode,
      baofuHtCity: [],
      baofuHtDistinct: [],
      baofuHtOccupation,
      baofuHtEnterpriseType,
      baofuHtEnterpriseScale,
      baofuHtEconomicNature,
      open: false,
      title: '银行开户资料',
      loading: false,
      disabled: true,
      merchant: {
      },
      form: {
        bankAccountType: '',
        bankExtra: {},
        bankAddtional: {},
      },
      showResolve: (value) => { },
      showReject: (reason) => { },
    }
  },
  methods: {
    show(id) {
      this.merchant.id = id
      this.load()
      this.open = true
      return new Promise((resolve, reject) => {
        this.showResolve = resolve
        this.showReject = reject
      });
    },
    onClose() {
      this.$refs.form.resetFields()
    },
    load() {
      findBaofuMerchant(this.merchant.id).then(res => {
        this.merchant = { ...res.data }
        if (this.merchant.bankExtra) {
          this.form.bankExtra = JSON.parse(this.merchant.bankExtra)
        } else if (this.merchant.bankAccountType === 'SSQY-MC') {
          this.form.bankExtra = {
            isOnlineScene: '0',
            onlineEnterpriseWebsite: '',
            onlineShopName: '',
            isFranchiseChain: '0',
          }
        } else if (this.merchant.bankAccountType === 'HT-MC') {
          this.form.bankExtra = {
            registerProvince: '', registerCity: '', registerDistinct: '',
            occupation: '', enterpriseType: '', enterpriseScale: '',
            economicNature: '', country: 'CHN',
          }
        }
        if (this.merchant.bankAddtional) {
          this.form.bankAddtional = JSON.parse(this.merchant.bankAddtional)
        } else if (this.merchant.bankAccountType === 'SSQY-MC') {
          this.form.bankAddtional = {
            doorPhoto: '', cashierPhoto: '',
            businessPremisesPhoto: '', latest3MonthOrderTradeFlow: '',
            acquiringAgreement: '', inventoryPhoto: '',
          }
        }
        this.registerProvinceChange(this.form.bankExtra.registerProvince)
        this.registerCityChange(this.form.bankExtra.registerCity)
        this.disabled = (['I', 'P', 'S'].indexOf(this.merchant.status) > -1)
      })
    },
    checkForm() {
      if (this.merchant.bankAccountType === 'SSQY-MC') {
        if (!this.form.bankExtra.isOnlineScene) {
          this.form.bankExtra.isOnlineScene = '0'
        }
        if (!this.form.bankExtra.onlineEnterpriseWebsite) {
          this.form.bankExtra.onlineEnterpriseWebsite = '无网址'
        }
        if (!this.form.bankExtra.onlineShopName) {
          this.form.bankExtra.onlineShopName = '无网店'
        }
        if (!this.form.bankExtra.isFranchiseChain) {
          this.form.bankExtra.isFranchiseChain = '0'
        }
      }
      if (this.merchant.bankAccountType === 'HT-MC') {
        this.form.bankExtra.country = 'CHN'
      }
      this.merchant.bankExtra = JSON.stringify(this.form.bankExtra)
      this.merchant.bankAddtional = JSON.stringify(this.form.bankAddtional)
    },
    save() {
      this.checkForm()
      editBaofuMerchant(this.merchant).then(res => {
        if (res.code === 200) {
          this.open = false
          this.showResolve()
        }
      })
    },
    submit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.checkForm()
          editBaofuMerchant(this.merchant).then(res => {
            if (res.code === 200) {
              return bankAccountBaofuMerchant(this.merchant)
            }
          }).then(res => {
            if (res.code === 200) {
              this.open = false
              this.showResolve()
            }
          })
        }
      })
    },
    registerProvinceChange(val) {
      this.baofuHtCity = this.baofuHtProvince.find(o => o.value === val)?.children ?? []
      if (!this.baofuHtCity.find(o => o.value === this.form.bankExtra.registerCity)) {
        this.form.bankExtra.registerCity = ''
        this.form.bankExtra.registerDistinct = ''
      }
    },
    registerCityChange(val) {
      this.baofuHtDistinct = this.baofuHtCity.find(o => o.value === val)?.children ?? []
      if (!this.baofuHtDistinct.find(o => o.value === this.form.bankExtra.registerDistinct)) {
        this.form.bankExtra.registerDistinct = ''
      }
    }
  }
}
</script>
<style scoped lang="scss">
.form {
  padding: 20px 20px 80px 20px;
}

.footer-operation {
  bottom: 0;
  width: 100%;
  height: 80px;
  display: flex;
  z-index: 10000;
  padding: 0 20px;
  text-align: center;
  position: absolute;
  align-items: center;
  background-color: #ffffff;
  border-top: 1px solid #EBEEF5;

  .el-button {
    width: 100%;
  }
}
</style>
